<div class="user_container">
    <div class="row">
        <div class="col-md-1">
            <button class="btn btn-default" type="submit" data-toggle="modal" data-target="#exampleModal" class='addUsers'>添加</button>
        </div>
        <div class="col-md-2">
            <input type="text" class="form-control user_search_text" id="exampleInputName2" placeholder="请输入用户名">
        </div>
        <div class="col-md-2">
            <select class="form-control user_search_text">
            <option class="val">请选择角色</option>
          </select>
        </div>
        <div class="col-md-1 user_search">
            搜索
        </div>
    </div>
    <div class="row">
        <table class="table table-hover">
            <thead>
                <!-- <tr> -->
                <th>序号</th>
                <th>用户名</th>
                <th>姓名</th>
                <th>角色</th>
                <th>性别</th>
                <th>状态</th>
                <th>手机号</th>
                <th>操作</th>
                <!-- </tr> -->
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1</td>
                    <td>username</td>
                    <td>name</td>
                    <td>role</td>
                    <td>femen</td>
                    <td>status</td>
                    <td>18777776666</td>
                    <td>
                        <span>设置</span>
                        <span>移除</span>
                        <span>详情</span>
                        <span>修改</span>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>张14</td>
                    <td>张14</td>
                    <td>学生</td>
                    <td>女</td>
                    <td>正常</td>
                    <td>15234366379</td>
                    <td>
                        <span>设置</span>
                        <span>移除</span>
                        <span>详情</span>
                        <span>修改</span>
                    </td>
                </tr> -->
            </tbody>
        </table>
    </div>
    <div class="row">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li class="num">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <!-- <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li> -->
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <!-- 模态框使用 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">添加用户信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="inputEmail3" placeholder="用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="inputPassword3" placeholder="name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <div class="radio">
                                    <label>
					  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>男
					</label> &nbsp;&nbsp;
                                    <label>
					  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
					  女
					</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">手机号</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="inputPassword3" placeholder="tel">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">生日</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="inputPassword3" placeholder="date">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-default">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框结束 -->
    <!-- 设置模态框 -->
    <div class="modal fade szmd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">设置角色</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="inputEmail3" placeholder="用户名" readonly value="lisi">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">角色</label>
                            <div class="col-sm-10">
                                <label class="checkbox-inline">
					<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
					</label>
                                <label class="checkbox-inline">
					<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
					</label>
                                <label class="checkbox-inline">
					<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
					</label>
                            </div>

                        </div>




                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-default">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 设置模态框结束 -->
</div>







<!-- <script type="text/javascript">
    //1.获取token
    var token = sessionStorage.getItem("token");
    console.log(token);
    var baseUrl = 'http://39.106.47.64:7788/';
    //1.请求所有用户角色，到下拉列表框里
    $.ajax({
        url: baseUrl + "role/findAll",
        type: 'GET',
        Headers: {
            "Authorization": sessionStorage.getItem("token")
        },
        success: function(data) {
            data.data.forEach((item) => {
                $(".user_container .val").after(`<option>` + items.name + `</option>`);
            });
        }
    });

    //2.封装请求所有用户数据函数
    findAllByPage(currenPage, pageSize, username, rolename)
    if (username != '') {
        url = baseUrl + '/baseUser/pageQuery?page=' + currenPage + '&pageSize=' + pageSize + '&username=' + username
    } else if (rolename != '请选择角色') {
        url = baseUrl + '/baseUser/pageQuery?page=' + currenPage + '&pageSize=' + pageSize + '&rolename=' + rolename
    } else if (username != '' && rolename != '请选择角色') {
        url = baseUrl + '/baseUser/pageQuery?page=' + currenPage + '&pageSize=' + pageSize + '&username=' + username + '&rolename=' + rolename
    } else {
        //均为空
        url = baseUrl + '/baseUser/pageQuery?page=' + currenPage + '&pageSize=' + pageSize
    }

    $.ajax({
        url: url,
        type: 'get',
        headers: {
            "Authorization": sessionStorage.getItem("token")
        },
        success: function(data) {
            //根据分页/搜索框查询出来的所有用户数据
            console.log(data, '根据分页/搜索框查询出来的所有用户数据');
        }
    });
</script> -->





<script>
    //声明全局变量
    var baseUrl = 'http://39.106.47.64:7788/';
    var currentPage = 1;
    var pageSize = 10;

    //通过promise封装请求函数
    function getData(type, url) {
        var p = new Promise((resolve, reject) => {
            //异步请求
            $.ajax({
                url: url,
                type: type,
                headers: {
                    "Authorization": sessionStorage.getItem("token")
                },
                success: function(data) {
                    resolve(data);
                }
            })
        });
        return p;
    }

    //1.请求角色信息
    getData("get", baseUrl + "role/findAll").then(function(data) {
        data.data.forEach((item) => {
            $(".user_container .val").after('<option>' + item.name + '</option>');
        });
    });

    //封装请求用户函数-处理数据
    function getUserData(url) {
        //2.请求所有用户-根据分页
        return getData("get", baseUrl + url).then(function(data) {
            //先清空所有分页按钮
            if ($(".clicknum").length > 0) {
                $(".clicknum").remove();
            }
            //获取用户总量，设置分页
            var num = Math.ceil((data.data.total) / pageSize);
            for (var i = num; i > 0; i--) {
                $(".user_container .num").after(`<li class="clicknum"><a href="#">` + i + `</a></li>`);
            }
            //给分页按钮绑定事件
            $(".clicknum").click(() => {
                currentPage = $(event.target).text();
                getUserData("baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize);
            });
            //清空所有tbody元素
            $(".user_container tbody").empty();
            //根据对象个数创建tr并追加
            data.data.list.forEach((item) => {
                $(".user_container tbody").append(`<tr>
				<td>` + item.id + `</td>
				<td>` + item.username + `</td>
				<td>` + item.realname + `</td>
				<td>` + item.politicsStatus + `</td>
				<td>` + item.gender + `</td>
				<td>` + item.status + `</td>
				<td>` + item.telephone + `</td>
				<td>
					<span data-toggle="modal" data-target=".szmd">设置</span>
					<span class="deleteById">移除</span>
					<span>详情</span>
					<span data-toggle="modal" data-target="#exampleModal">修改</span>
				</td>
                </tr>`);
            });
            //给详情绑定事件.content-main./pages/user.html
            $(".details").click(() => {
                $(".content-main").load("../pages/user.html");
                //将点击数据存储到本地session中，以便在user.html中获取展示
            });
            //给修改按钮绑定事件
            $(".changeUsers").click(() => {
                $("#exampleModalLabel").text("修改用户信息");
            });
            //给删除按钮绑定事件
            $(".deleteById").click(() => {
                var id = $(event.target).parent().parent().children().eq(0).text();
                getData("get", baseUrl + "baseUser/deleteById?id=" + id).then(function(data) {
                    if (data.status == 200) {
                        alert(data.message);
                    }
                    //页面刷新
                    getUserData("baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize);
                });
            });
        });
    }
    getUserData("baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize);

    //给搜索按钮绑定事件
    $(".user_search").click(() => {
        //1.获取用户输入
        var username = $(".user_search_text").eq(0).val();
        var rolename = $(".user_search_text").eq(1).val();
        if (username != '' && rolename == "请选择角色") {
            url = "baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize + "&username=" + username;
        } else if (username == "" && rolename != '请选择角色') {
            url = "baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize + "&rolename=" + rolename;
        } else if (username == '' && rolename == "请选择角色") {
            url = "baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize;
        } else {
            url = "baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize + "&username=" + username + "&rolename=" + rolename;
        }

        //发送请求
        getUserData(url);
    });
    //给添加按钮绑定事件-addUsers-#exampleModalLabel
    $(".addUsers").click(() => {
        $("#exampleModalLabel").text("添加用户信息");
    });

    //给修改按钮绑定事件-changeUsers
</script>





<style>
    .user_container {
        height: 100px;
        padding: 15px;
        color: #666666;
    }
    
    .user_container .col-md-1,
    .user_container .col-md-2 {
        height: 50px;
        color: #2cb5ac;
    }
    
    .user_container .user_search:hover {
        cursor: pointer;
    }
    
    .user_container .btn-default {
        color: #fff;
        background-color: #2cb5ac;
        font-size: 12px;
    }
    
    .user_container table td span:hover {
        cursor: pointer;
    }
</style>